<template>
    <div class="border shadow col-6 mx-auto mt-3 p-3">
        <div class="mb-3">
            <label for="input1" class="form-label">用户名</label>
            <input type="text" v-model="username" @change="uInfo" class="form-control" id="input1"
                aria-describedby="warning" placeholder="请输入用户名">
            <div v-if="uIstrue" id="warning" class="form-text text-danger">用户名不能包含数字信息内容</div>
        </div>
        <div class="mb-3">
            <label for="input1" class="form-label">用户名</label>
            <input type="text" v-model="password" @change="pInfo" class="form-control" id="input1"
                aria-describedby="warning" placeholder="请输入密码">
            <div v-if="pIstrue" id="warning" class="form-text text-danger">密码长度控制在6~10个字符之间</div>
        </div>
        <button type="button" class="btn btn-success col-12">登陆</button>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
let username = ref('');
let password = ref('');
let uIstrue = ref(false);
let pIstrue = ref(false);
const uInfo = () => {
    watch(username, (newValue, oldValue) => {
        if (!(/^\D*$/.test(newValue))) {
            uIstrue.value = true;
        } else {
            uIstrue.value = false;
        }
    }, {
        immediate: true,
        flush: 'pre',
    });
};
const pInfo = () => {
    watch(password, (newValue, oldValue) => {
        if (!(/^\w{6,10}$/.test(newValue))) {
            pIstrue.value = true;
        } else {
            pIstrue.value = false;
        }
    }, {
        immediate: true,
        flush: 'pre',
    });
};
</script>

<style lang="scss" scoped></style>